<template>
  <div>
    <ProTable
      :columns="columns"
      :data-source="activities"
      :loading="isFetching"
    >
      <template #extraL>
        <a-button
          type="primary"
          @click="handleEdit()"
        >
          新增
        </a-button>
        <a-button
      class="mr10"
      type="primary"
      @click="reLoad()"
    >
      刷新
    </a-button>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'image'">
          <img
            :src="record.image"
            style="width: 50px; height: 50px"
          />
        </template>
        <template v-if="column.dataIndex === 'Admin'">
          {{ record.Admin.admin_name }}
          </template>
        <template v-if="column.dataIndex === 'condition'">
          <a-tag
            color="green"
            v-if="record.condition == 0"
          >
            普通用户
          </a-tag>
          <a-tag
            color="cyan"
            v-if="record.condition == 8"
          >
            VIP用户
          </a-tag>
        </template>

        <template v-if="column.dataIndex === 'is_destroy'">
          <a-popconfirm
            class="gap-popconfirm"
            :title="'确定' + record.is_destroy ? '取消发布?' : '发布?'"
            ok-text="确认"
            cancel-text="取消"
            @cancel="cancelSwitch(record)"
            @confirm="handleSwitch(record)"
          >
            <a-switch v-model:checked="record.is_destroy" />
          </a-popconfirm>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </ProTable>

    <smsForm
      ref="activityFormEle"
      
      @activity-added="handleActivityAdded"
 
    />

    <a-drawer
      title="报名用户"
      placement="right"
        :maskClosable='false'
    :keyboard='false'
      width="800"
      @close="openDia=false"
 
      v-model:open="openDia"
    >
      <a-button type="primary">批量发送短信</a-button>
      <!-- <a  >批量发送短信</a> -->
      <ProTable
        :columns="IntegralColumns"
        :data-source="IntegralActivities"
        :pagination="Integralpagination"
        @change="IntegralhandleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <span>
              <a>发送短信</a>
            </span>
          </template>
        </template>
      </ProTable>
    </a-drawer>
  </div>
</template>

<script setup>
  import axios from 'axios'
  import { ref, onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElButton, ElTable, ElTableColumn, ElDialog } from 'element-plus'
  import smsForm from './smsForm.vue'
  import { smsList, smsDel, activeUpdate } from '@/api/index'
  const activities = ref([
    
  ])
  const columns = [
    { testmsg_id: 'ID' },
    { access_key_id: 'AccessKeyID' },
    {
      secret_access_key: 'AccessKeySecret'
    },
    {
      sign_name: '短信签名'
    },

    {
      template_code: '短信模板code'
    },
    {
      template_param: '短信模板参数'
    },
    {
      text_name: '模版名称'
    },
    { Admin: '操作人' },
  
    { created_at: '创建时间' },
    {
      action: {
        title: '操作',
        width: '90px'
      }
    }
  ]
  const IntegralColumns = [
    {
      id: 'ID'
    },
    {
      point: '昵称'
    },
    {
      record: '头像'
    },
    {
      record: '手机号'
    },
    {
      record: '邮箱'
    },
    {
      record: '积分'
    },
    {
      created_at: '报名时间'
    },
    {
      action: {
        title: '操作',
        width: '90px'
      }
    }
  ]
  const Integralpagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const IntegralActivities = ref([
    {
      id: '1',
      record: 1585455555
    }
  ])
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const IntegralhandleTableChange = ({ current, pageSize }) => {
    Integralpagination.current = current
    Integralpagination.pageSize = pageSize
  }
  const activityFormEle = ref()

  const router = useRouter()
  const isFetching = ref(false)
  const getList = () => {
    smsList({
      page: pagination.current,
      pageSize: pagination.pageSize
    })
      .then((response) => {
        if(response.errorCode){
        message.error(response.msg||'操作失败')
        return
      }
        pagination.total = response.total
        activities.value = response.data
      })
      .catch((error) => {
        console.error('Error fetching activities:', error)
      })
  }
  const reLoad = () => {
    pagination.current = 1
    getList()
  }
  getList()
  const openDia = ref(false)
  const handleDetail = () => {
    openDia.value = true
  }
  const handleSwitch = (row) => {
    activeUpdate({
      activity_id: row.id,
      data: {
        is_destroy: row.is_destroy
      }
    }).then((res) => {
      if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
      getList()
    })
  }
  const cancelSwitch=(row)=>{
    row.is_destroy= !row.is_destroy
   
  }
  // 编辑
  const handleEdit = (row) => {
    
    activityFormEle.value.init(row)
  }
  const handleDelete = (row) => {
    smsDel({ testmsg_id: row.testmsg_id })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
        getList()
      })
      .catch((error) => {
        console.error('Error deleting admin:', error)
      })
  }

  const handleActivityAdded = () => {
    getList() // Refresh activity list after adding
 
  }

  // onMounted(fetchActivities);
</script>

<style scoped>
  /* Add your scoped styles here */
</style>
